<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibles"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 答题框 -->
      <div class="container">
        <div class="box">
          <span class="span"
            >[题型] : {{ data.questionType | formatQuestionType }}</span
          >
          <span class="span">[编号] : {{ data.id }}</span>
          <span class="span"
            >[难度] : {{ data.difficulty | formatDifficulty }}</span
          >
          <span class="span">[标签] : {{ data.tags }}</span>
          <span class="span">[学科] : {{ data.subjectName }}</span>
          <span class="span">[目录] : {{ data.directoryName }}</span>
          <span class="span">[方向] : {{ data.direction }}</span>
        </div>
        <hr />
        <span>[题干] : {{ data.question | html2Text }} </span>
        <div class="timu">
          <div v-if="data.questionType == 1 ? true : false" class="danxuan">
            <div>单选题:(以下选中的选项为正确答案)</div>
            <!-- <div>单选题选项?</div> -->
            <el-radio-group v-model="radio">
              <el-radio
                v-for="(item, index) in data.options"
                :key="index"
                :label="item.isRight"
                style="display: block; margin: 8px"
                disabled
                >{{ item.title }}</el-radio
              >
            </el-radio-group>
          </div>
          <div v-if="data.questionType == 2 ? true : false" class="duoxuan">
            <div>多选题:(以下选中的选项为正确答案)</div>
            <el-checkbox
              v-for="(item, index) in data.options"
              :key="index"
              style="display: block; margin: 8px"
              disabled
              :checked="item.isRight == 0 ? false : true"
              >{{ item.title }}</el-checkbox
            >
          </div>
          <div v-if="data.questionType == 3 ? true : false" class="jianda">
            简答题目
          </div>
        </div>
        <hr />
        <div>
          [参考答案]:
          <el-button type="danger" @click="show = true">视频答案预览</el-button>
        </div>
        <video v-if="show" width="320" height="240" controls>
          <source :src="data.videoURL" type="video/mp4" />
        </video>

        <hr />
        <div>[答案解析]:{{ data.answer | html2Text }}</div>
        <hr />
        <div>[题目备注]:{{ data.remarks }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="childSetDialogVisible">取 消</el-button>
        <el-button type="primary" @click="childSetDialogVisible"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '../../../api/hmmm/questions'

export default {
  name: 'Answer',
  components: {},
  props: {
    dialogVisibles: {
      type: Boolean,
      required: true
    },
    setDialogVisibles: {
      type: Function
    },

    listValue: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      show: false,
      data: {},
      radio: 1
    //   dialogVisible: false
    }
  },
  async  created() {
    await detail({ id: this.listValue.id })
  },
  mounted() {},
  methods: {
    childSetDialogVisible() {
    //   console.log('子')
      this.$emit('setDialogVisibles')
    },
    handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
      this.$emit('setDialogVisibles')
      // })
      // .catch(_ => {})
    }
  }
}

</script>

<style lang="scss" scoped>
.container {
  padding: 5px;
  .box {
    display: flex;
    flex-wrap: wrap;
    span {
      flex: 8;
      background-color: aquamarine;
    }
  }
}
</style>
